<template>
    <div class="group-item">
        <div class="group-item-chart" :id="'charts'+index"></div>
    </div>
</template>
<script>

export default {
    props  : {
        index    : {
            type   : Number,
            default: 0
        },
        option   : {
            type: Object,
            default() {
                return {}
            }
        },
        chartData: {
            type: Array,
            default() {
                return []
            }
        },
        indicator: {
            type: Array,
            default() {
                return []
            }
        },
    },
    methods: {
        // 获取需要生成图表的元素
        // 以下是一些常用的配置参数 都有写明详细的注释
        initChart() {
            let myEcharts = null
            let ids       = 'charts' + String(this.index)
            let query     = uni.createSelectorQuery();
            myEcharts     = this.$echarts.init(query.select(ids))
            let option    = this.option
            if (myEcharts) {

                myEcharts.setOption(option)

            }
            window.addEventListener('resize', function () {
                myEcharts.resize();
            });
        },
    },

    // 然后在mounted里调用该方法就可以了
    mounted() {
        this.initChart()
    }
}
</script>
<style lang="scss" scoped>
.group-item {
    width: 100%;
    height: 327rpx;

    .group-item-chart {
        width: 100%;
        height: 327rpx;
    }
}
</style>
